<template>

  <div class="Legend">
    <div class="loading" v-if="pageStat">
      <Loading></Loading>
    </div>

    <div class="content" v-if="!pageStat">
      <div class="title">
        <div>
          <div class="son">
            <h1>Items Legend</h1>
          </div>
          <ul class="Legends">
            <li v-for="item in Legends[0]" :key="item.id" @click="goToItemLegend(item)">
              <div class="item_wrap">
                <div class="collapse">
                  <img :src="item.legend_item__image" alt="图片" class="Legends_icon" />
                </div>
                <div class="legend_item__name">
                  <span>{{ item.legend_item__name }}</span>
                  <p>{{ item.legend_item__description }}</p>
                </div>
              </div>
            </li>
          </ul>
        </div>
      </div>


      <div>
        <div class="son">
          <h1>Badges Legend</h1>
        </div>
        <ul class="Legends">
          <li v-for="item in Legends[1]" :key="item.id" @click="goToItemLegend(item)">
            <div class="item_wrap">
              <div class="collapse">
                <img :src="item.legend_item__image" alt="图片" class="Legends_icon" />
              </div>
              <div class="legend_item__name">
                <span>{{ item.legend_item__name }}</span>
                <p>{{ item.legend_item__description }}</p>
              </div>
            </div>
          </li>
        </ul>
      </div>

      <div>
        <div class="son">
          <h1>Triumphs Legend</h1>
        </div>
        <ul class="Legends">
          <li v-for="item in Legends[2]" :key="item.id" @click="goToItemLegend(item)">
            <div class="item_wrap">
              <div class="collapse">
                <img :src="item.legend_item__image" alt="图片" class="Legends_icon" />
              </div>
              <div class="legend_item__name">
                <span>{{ item.legend_item__name }}</span>
                <p>{{ item.legend_item__description }}</p>
              </div>
            </div>
          </li>
        </ul>
      </div>

      <div>
        <div class="son">
          <h1>Seals Legend</h1>
        </div>
        <ul class="Legends">
          <li v-for="item in Legends[3]" :key="item.id" @click="goToSealsLegend(item.id)">
            <div class="item_wrap">
              <div class="collapse">
                <img :src="item.legend_item__image" alt="图片" class="Legends_icon" />
              </div>
              <div class="legend_item__name">
                <span>{{ item.legend_item__name }}</span>
                <p>{{ item.legend_item__description }}</p>
              </div>
            </div>
          </li>
        </ul>
      </div>
    </div>
  </div>
</template>
<script>
  import axios from "axios";
  import Loading from '@/components/loading/Loading.vue'

  export default {
    data() {
      return {
        Legends: [],
        pageStat: true
      };
    },
    components: {
      Loading
    },
    created() {
      this.getData();
    },
    methods: {
      getData() {
        axios
          .get("api/getLegends")
          .then((res) => {
            console.log(res.data);
            this.Legends = res.data;
            this.$nextTick(() => {
              this.pageStat = false
            })
          })
          .catch((err) => {
            console.error(err);
          });

      },
      goToItemLegend(item) {
        var id = item.id
        var flag = false
        if (item.legend_item__description == null) {
          flag = true
        }
        console.log(flag)
        this.$router.push({
          name: "ItemLegend",
          params: {
            id: id,
            flag
          },
        });
      },

      goToSealsLegend(id) {
        this.$router.push({
          name: "SealsLegend",
          params: {
            id: id
          },
        });
      }
    },
  };
</script>
<style scoped>
  .loading {

    height: 718px;
    overflow: hidden;
  }

  .Legend {
    height: 100%;
    color: #ccc;
    overflow: hidden;
  }

  .item_wrap {
    width: 170px;
    text-align: center;
  }

  ul {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
  }

  li {
    width: 170px;
    border: 1px solid #ccc;
    margin: 7px;
  }

  .Legends_icon {
    width: 70%;
    margin-top: 5px;

  }

  .Legends_icon:nth-child(3) {
    width: 55%;
    margin-top: 5px;
  }

  .legend_item__name span {
    font-size: 25px;
    font-weight: bold;
    font-family: unset;

  }

  .legend_item__name p {
    font-size: 15px;
  }

  .son {
    margin-left: 15px;
  }
</style>